<template>

	<div class="pb50">
		<el-form size="small" ref="formRef" :model="form" label-width="150px" v-if="!loading">
			<!--商品信息-->
			<Info :data="form"></Info>

			<!--规格-->
			<Spec :data="form"></Spec>

			<!--其它-->
			<Other :data="form"></Other>

			<!--提交-->
		</el-form>

		<div class="common-button-wrapper">
			<el-button size="small" type="info" @click="cancelFunc">取消</el-button>
			<el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
		</div>
	</div>
</template>
<script>
	import {
		reactive,
		toRefs,
		defineComponent
	} from "vue";
	import {
		detail,
		saveData
	} from "@/api/advance.js";
	import Info from "./part/Info.vue";
	import Spec from "./part/Spec.vue";
	import Other from "./part/Other.vue";
	export default defineComponent({
		components: {
			/*商品基本信息*/
			Info,
			/*规格*/
			Spec,
			/*其它*/
			Other,
		},
		setup() {
			const state = reactive({
				loading: true,
				form: {
					/*商品ID*/
					advance_product_id: 0,
					/*商品状态*/
					status: 10,
					/*商品名称*/
					product_name: "",
					/*图片*/
					product_image: "",
					/*排序*/
					sort: 100,
					/*规格*/
					product_sku_id: 0,
					/*限购数量*/
					limit_num: 1,
					/*定金*/
					money: "",
					/*尾款立减金额*/
					reduce_money: "",
					/*活动时间*/
					active_time: [],
					/*审核状态*/
					audit_status: "",
					/*商品表格*/
					tableData: [],
				},
			})
			const getData = () => {
				state.loading = true;
				detail({
						advance_product_id: state.form.advance_product_id,
					},
					true
				).then((res) => {
					const {
						data: {
							model
						}
					} = res;
					state.form.product_name = model.product.product_name;
					state.form.product_image = model.product.image[0].file_path;
					state.form.product_id = model.product.product_id;
					state.form.active_time = model.active_time;
					state.form.money = model.money;
					state.form.limit_num = model.limit_num;
					state.form.status = model.status;
					state.form.sort = model.sort;
					state.form.stock = model.stock;
					state.form.reduce_money = model.reduce_money;
					state.form.audit_status = model.audit_status;
					model.sku.forEach((item) => {
						item.product_name = state.form.product_name;
						item.spec_name = item.product_attr;
						item.spec_type = model.product.spec_type;
					});
					state.form.tableData = model.sku;
					state.loading = false;
				}).catch(() => {
					state.loading = false;
				})
			}
			return {
				...toRefs(state),
				getData,
			};
		},
		mounted() {
			let id = this.$router.currentRoute.value.query.advance_product_id;
			if (id) {
				this.form.advance_product_id = id;
				this.getData();
			}
		},
		methods: {
			tableFormet(list) {
				list.forEach((item) => {
					item.product_attr = item.spec_name;
				});
				return list;
			},
			cancelFunc() {
				this.$router.back(-1);
			},
			onSubmit() {
				this.$refs.formRef.validate((valid) => {
					if (valid) {
						this.loading = true;
						let params = {
							product_id: this.form.product_id,
							money: this.form.money,
							status: this.form.status,
							sort: this.form.sort,
							limit_num: this.form.limit_num,
							active_time: this.form.active_time,
							reduce_money: this.form.reduce_money,
							advance_product_id: this.form.advance_product_id,
							audit_status: this.form.audit_status,
							product: {},
						};
						params.product.spec_list = this.tableFormet(this.form.tableData);
						saveData(params, true)
							.then((data) => {
								this.loading = false;
								ElMessage({
									message: "恭喜你，添加成功",
									type: "success",
								});
								this.cancelFunc();
							})
							.catch((error) => {
								this.loading = false;
							});
					}
				})
			}
		}
	});
</script>
<style>
	.edit_container {
		font-family: "Avenir", Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	.ql-editor {
		height: 400px;
	}
</style>